<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例">
    </meta>
    <title>影像-纠偏</title>
    <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .box span {
            display: block;
            margin-top: 10px;
        }

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 38px;
            padding: 0 10px;
            line-height: 38px;
            border-radius: 100px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
        }

        .defultbtn:hover {
            background-color: #b3daf8;
        }

        .btnon {
            background-color: #1E9FFF;
            color: #fff;
            border: 1px solid #1E9FFF;
        }

        .dialog,
        .tip {
            position: absolute;
            width: 84px;
            min-height: 22px;
            color: white;
            padding: 5px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
        <earth-comp></earth-comp>
    </div>

    <script>
        // 1 创建Earth的vue组件
        var EarthComp = {
            template: `
                <div style="width: 100%; height: 100%">
                    <div ref="earthContainer" style="width: 100%; height: 100%">
                    </div>
                    <div class="box" style="position: absolute; left: 18px; top: 18px; color: white; background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 25px;min-width:150px; font-size:24px; font-family: 宋体;">
                        <div class="defultbtn" :class="{'btnon':correct}"  @click="correct = !correct">纠偏</div>
                        <div class="defultbtn"  @click="goTo">定位</div>
                    </div>
                    <div 
                        v-show="showInfo" 
                        class="dialog"
                        :style="{ left: (winPos1[0]) + 'px', bottom: (winPos1[1] - 11) + 'px' }"
                    >
                        <span>3dtiles数据</span>
                    </div>
                    <div 
                        v-show="showTip" 
                        class="tip"
                        :style="{ left: (winPos2[0]) + 'px', bottom: (winPos2[1] - 11) + 'px' }"
                    >
                        <span>地形影像</span>
                    </div>
                </div>
            `,

            data() {
                return {
                    dstCoordType: 'WGS84',
                    correct: true,
                    _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
                    showInfo: true,
                    showTip: true,
                    winPos1: [0, 0],
                    winPos2: [0, 0],
                };
            },
            // 1.1 资源创建
            mounted() {
                // 1.1.1 创建地球
                var earth = new XE.Earth(this.$refs.earthContainer);
                earth.interaction.picking.enabled = true;

                // 1.1.2 场景配置
                earth.sceneTree.root = {
                    "expand": true,
                    "title": "预览场景",
                    "children": [{
                        "czmObject": {
                            "name": '大雁塔',
                            "xbsjType": "Tileset",
                            "url": '../assets/dayanta/tileset.json',
                            "xbsjPosition": [
                                1.9016974701882112,
                                0.5972325152147303,
                                8.352576160356152
                            ],
                            "xbsjUseOriginTransform": false,
                            "skipLevelOfDetail": false
                        },
                    }, {
                        "ref": "imagery",
                        "czmObject": {
                            "xbsjType": "Imagery",
                            "name": "高德地图",
                            "xbsjImageryProvider": {
                                "XbsjImageryProvider": {
                                    "url": "//webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                                    "srcCoordType": "GCJ02",
                                    "dstCoordType": "WGS84",
                                },
                            }
                        },
                    }, {
                        "ref": "polylineArrow1",
                        "czmObject": {
                            "xbsjType": "GeoPolylineArrow",
                            "positions": [
                                [
                                    1.9017391128055674,
                                    0.5972332869821096,
                                    0
                                ],
                                [
                                    1.9017000577417968,
                                    0.5972166912517689,
                                    1.2122642818080087
                                ]
                            ]
                        }
                    }, {
                        "ref": "polylineArrow2",
                        "czmObject": {
                            "xbsjType": "GeoPolylineArrow",
                            "positions": [
                                [
                                    1.9017215140865549,
                                    0.5971876293116101,
                                    0
                                ],
                                [
                                    1.9017017380258212,
                                    0.597203108224537,
                                    0
                                ]
                            ]
                        }
                    }, {
                        "ref": 'pin1',
                        "czmObject": {
                            "name": 'Pin1',
                            "xbsjType": "Pin",
                            "position": [1.9017393161494873, 0.5972330002724645, 9.313225746154785e-10],
                            "show": false
                        },
                    }, {
                        "ref": 'pin2',
                        "czmObject": {
                            "name": 'Pin2',
                            "xbsjType": "Pin",
                            "position": [1.9017217177802577, 0.5971871382500731, 9.313225746154785e-10],
                            "show": false
                        },
                    }]
                };

                // var imagery = earth.sceneTree.$refs.imagery.czmObject;
                var imagery = earth.sceneTree.root.children[1].czmObject;
                this._imagery = imagery;
                var tileset1 = earth.sceneTree.root.children[0].czmObject;
                var pin1 = earth.sceneTree.$refs.pin1.czmObject;
                var pin2 = earth.sceneTree.$refs.pin2.czmObject;
                var polylineArrow1 = earth.sceneTree.$refs.polylineArrow1.czmObject;
                var polylineArrow2 = earth.sceneTree.$refs.polylineArrow2.czmObject;

                // only for Debug
                window.earth = earth;
                window.tileset1 = tileset1;
                window.polylineArrow1 = polylineArrow1;
                window.polylineArrow2 = polylineArrow2;
                window.pin1 = pin1;
                window.pin2 = pin2;

                this._earth = earth;

                // 1.1.5 数据绑定
                // disposers 用来收集资源销毁函数，并在析构时自动调用！
                {
                    this._disposers = [];
                    this._disposers.push(XE.MVVM.bind(this, 'dstCoordType', imagery.xbsjImageryProvider.XbsjImageryProvider, 'dstCoordType'));
                    this._disposers.push(XE.MVVM.track(this, 'winPos1', pin1, 'winPos'));
                    this._disposers.push(XE.MVVM.track(this, 'winPos2', pin2, 'winPos'));

                    this.goTo();
                }
            },
            // 1.2 资源销毁
            beforeDestroy() {
                // vue程序销毁时，需要清理相关资源
                this._earth = this._earth && this._earth.destroy();
                this._disposers.forEach(d => d());
                this._disposers.length = 0;
            },
            methods: {
                setPositionWithCurrentCamera() {
                    this._viewshed && this._viewshed.setPositionWithCurrentCamera();
                },
                goTo() {
                    // 设置相机位置
                    // earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
                    // this._earth.camera.position =  [1.9016996731582811,0.5972206212385686,891.9777956516596];
                    // this._earth.camera.rotation = [6.2652663916764455,-1.4855510600618218,6.283185307179586];
                    const position = [1.9016996731582811, 0.5972206212385686, 891.9777956516596];
                    const rotation = [6.2652663916764455, -1.4855510600618218, 6.283185307179586];
                    this._earth.camera.flyTo(position, 0, rotation);
                }
            },
            watch: {
                correct(newVal) {
                    if (newVal) {
                        this.dstCoordType = 'WGS84';
                    } else {
                        this.dstCoordType = 'GCJ02';
                    }
                }
            }
        }

        // 2 创建vue程序
        // XE.ready()用来加载Cesium.js等相关资源
        XE.ready().then(() => {
            // 加载标绘插件
            return XE.HTML.loadJS('../../XbsjEarth-Plugins/plottingSymbol/plottingSymbol.js');
        }).then(() => {
            var app = new Vue({
                el: '#vueApp',
                components: {
                    EarthComp,
                },
            });
        });
    </script>
</body>

</html>